<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <title>我的商场 | 主页</title>
    <jsp:include page="/includes/header.jsp"></jsp:include>


</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <jsp:include page="/includes/nav.jsp"></jsp:include>

    <jsp:include page="/includes/menu.jsp"></jsp:include>

    <div class="content-wrapper">
        <c:if test="${message !=null}">
            <div class="modal modal-danger fade in" id="modal-danger" style="display: block;">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true" id="closeM">×</span></button>
                            <h4 class="modal-title">信息提示</h4>
                        </div>
                        <div class="modal-body">
                            <p align="center">${message}</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="closeModa" class="btn btn-outline pull-right"
                                    data-dismiss="modal">关闭
                            </button>
                                <%--<button type="button" class="btn btn-out>close</button>--%>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
        </c:if>

        <section class="content-header">
            <h1>
                用户列表
                <%-- <small>advanced tables</small>--%>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-bank (alias)"></i> 主页</a></li>
                <li><a href="#">用户管理</a></li>
                <li class="active">用户列表</li>
            </ol>
        </section>
        <section class="content">
            <div class="row">
                <div class="col-xs-12">

                    <div class="box">
                        <div class="box-header text-center">
                            <h3 class="box-title">用户列表</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <div id="example1_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="dataTables_length" id="example1_length">
                                            <label>单页显示<select name="example1_length" aria-controls="example1"
                                                               class="form-control input-sm" id="setPageSize">
                                                <c:if test="${userList != null}">
                                                    <option value="${fn:length(userList)}">${fn:length(userList)}</option>
                                                </c:if>
                                                <c:if test="${pageInfo != null}">
                                                    <option value="${pageInfo.pageSize}">${pageInfo.pageSize}</option>
                                                    <c:forEach items="10,25,50,100" var="pageSi">
                                                        <c:if test="${pageSi!=pageInfo.pageSize}">
                                                            <option value="${pageSi}">${pageSi}</option>
                                                        </c:if>

                                                    </c:forEach>
                                                </c:if>

                                                <%--<option value="50">50</option>
                                                <option value="100">100</option>--%>
                                            </select> 条数</label></div>
                                    </div>

                                    <div class="col-md-2">
                                        <a type="button" href="/user_form.jsp?pageSize=${pageInfo.pageSize}"
                                           class="btn btn-block btn-danger btn-sm"
                                           name="addUser" id="addUser">
                                            <i class="fa  fa-user-plus"></i>添加用户</a>
                                    </div>
                                    <div class="col-md-2">
                                        <a type="button" id="deleteArray"
                                           class="btn btn-block btn-danger btn-sm" name="deleteArray">
                                            <i class="fa fa-minus-square"></i>批量删除</a>
                                    </div>

                                    <div class="col-md-4">
                                        <form action="/userLike" method="post">
                                            <div id="example1_filter" class="dataTables_filter"><label><input
                                                    id="searchAll"
                                                    type="search" class="form-control input-sm" placeholder="搜索"
                                                    name="search"
                                                    aria-controls="example1">
                                                <button type="submit" class="btn btn-default btn-sm" id="simple-search">
                                                    <i
                                                            class="fa fa-search"></i></button>
                                                <button type="button" class="btn btn-default btn-sm"
                                                        title="Advanced-Search"
                                                        id="toggle-advanced-search">
                                                    <i class="fa  fa-expand"></i>
                                                </button>
                                            </label>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="row" id="seaches" style="display: none">
                                    <form action="/userLike" method="post">

                                        <div class="col-xs-3 col-xs-offset-1 ">
                                            <input type="text" class="form-control" placeholder="用户名" name="username"
                                                   id="searchName">
                                        </div>
                                        <div class="col-xs-3 ">
                                            <input type="text" class="form-control" placeholder="电话" name="phone"
                                                   id="searchPhone">
                                        </div>
                                        <div class="col-xs-3">
                                            <input type="text" class="form-control" placeholder="邮箱" name="email"
                                                   id="searchEmail">
                                        </div>
                                        <div class="col-xs-1">
                                            <button type="submit" class="btn btn-default btn-sm" id="advanced-search"><i
                                                    class="fa fa-search"></i> 高级搜索
                                            </button>
                                        </div>
                                    </form>
                                </div>
                                <input type="hidden" value="${pageInfo.pageNum}" id="hiddenPageNum">
                                <input type="hidden" value="${pageInfo.pageSize}" id="hiddenPageSize">


                                <div class="row">
                                    <div class="col-sm-12">
                                        <table id="example1" class="table table-bordered table-striped dataTable"
                                               role="grid" aria-describedby="example1_info">
                                            <thead>
                                            <tr role="row">
                                                <th class="sorting_asc" tabindex="0" aria-controls="example1"
                                                    rowspan="1" colspan="1" aria-sort="ascending"
                                                    aria-label="Rendering engine: activate to sort column descending"
                                                    style="width: 30px;"><input type="checkbox" onclick="checkAll()"
                                                                                id="selectAll">
                                                </th>
                                                <th class="sorting_asc" tabindex="0" aria-controls="example1"
                                                    rowspan="1" colspan="1" aria-sort="ascending"
                                                    aria-label="Rendering engine: activate to sort column descending"
                                                    style="width: 80px;">编号
                                                </th>
                                                <th class="sorting_asc" tabindex="0" aria-controls="example1"
                                                    rowspan="1" colspan="1" aria-sort="ascending"
                                                    aria-label="Rendering engine: activate to sort column descending"
                                                    style="width: 140px;">用户名
                                                </th>
                                                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1"
                                                    colspan="1" aria-label="Browser: activate to sort column ascending"
                                                    style="width: 140px;">电话号码
                                                </th>
                                                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1"
                                                    colspan="1"
                                                    aria-label="Platform(s): activate to sort column ascending"
                                                    style="width: 100px;">邮箱
                                                </th>
                                                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1"
                                                    colspan="1"
                                                    aria-label="Engine version: activate to sort column ascending"
                                                    style="width: 140px;">创建时间
                                                </th>
                                                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1"
                                                    colspan="1"
                                                    aria-label="CSS grade: activate to sort column ascending"
                                                    style="width: 240px;">操作
                                                </th>
                                            </tr>
                                            </thead>

                                            <c:forEach items="${pageInfo != null?pageInfo.list:userList}" var="tbuser">
                                                <tbody>
                                                <tr role="row" class="odd" id="tb">
                                                    <td class="sorting_1"><input type="checkbox" class="selectOne"
                                                                                 id="${tbuser.id}"></td>
                                                    <td>${tbuser.id}</td>
                                                    <td class="sorting_1">${tbuser.userName}</td>
                                                    <td>${tbuser.phone}</td>
                                                    <td>${tbuser.email}</td>
                                                    <td><fmt:formatDate value="${tbuser.createTime}"
                                                                        pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td>
                                                    <td>
                                                        <div class="btn-group">
                                                            <a type="button" onclick="javascript:detail(${tbuser.id})"
                                                               class="btn btn-success" data-toggle="modal"
                                                               data-target="#modal-info">
                                                                <i class="fa  fa-eye"></i>详情</a>

                                                            <a type="button"
                                                               href="userUpdate?id=${tbuser.id}&pageNum=${pageInfo.pageNum}&pageSize=${pageInfo.pageSize}"
                                                               class="btn btn-success"> <i class="fa fa-cog"></i> 编辑</a>

                                                            <a type="button"
                                                               href="/userDelete?id=${tbuser.id}&pageNum=${pageInfo.pageNum}&pageSize=${pageInfo.pageSize}"
                                                               class="btn btn-success" <%--style="width: 100px;"--%>><i
                                                                    class="fa fa-trash-o"></i>&nbsp; 删除</a>
                                                        </div>

                                                    </td>
                                                </tr>
                                                </tbody>
                                            </c:forEach>


                                            <%--<tfoot>
                                            <tr>
                                                <th rowspan="1" colspan="1">Rendering engine</th>
                                                <th rowspan="1" colspan="1">Browser</th>
                                                <th rowspan="1" colspan="1">Platform(s)</th>
                                                <th rowspan="1" colspan="1">Engine version</th>
                                                <th rowspan="1" colspan="1">CSS grade</th>
                                            </tr>
                                            </tfoot>--%>
                                        </table>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-5">
                                        <div class="dataTables_info" id="example1_info" role="status"
                                             aria-live="polite">Showing ${pageInfo.startRow} to ${pageInfo.endRow}
                                            of ${pageInfo.total} entries
                                        </div>
                                    </div>
                                    <div class="col-sm-7">
                                        <div class="dataTables_paginate paging_simple_numbers" id="example1_paginate">
                                            <ul class="pagination">
                                                <li class="paginate_button previous disabled" id="example1_previous"><a
                                                        href="#" aria-controls="example1" data-dt-idx="0" tabindex="0">Previous</a>
                                                </li>
                                                <c:if test="${pageInfo.pageNum!=1}">
                                                    <li class="paginate_button">
                                                        <a href="/user_list?pageSize=${pageInfo.pageSize}&pageNum=${pageInfo.pageNum-1}"
                                                           aria-controls="example1"
                                                           data-dt-idx="${pageInfo.navigatePages+1}"
                                                           tabindex="0">上一页</a>
                                                    </li>
                                                </c:if>
                                                <c:forEach var="i" begin="1" end="${pageInfo.pages}">
                                                    <c:if test="${pageInfo.pageNum != i}">
                                                        <li class="paginate_button"><a
                                                                href="/user_list?pageSize=${pageInfo.pageSize}&pageNum=${i}"
                                                                aria-controls="example1"
                                                                data-dt-idx="1"
                                                                tabindex="0">${i}</a>
                                                        </li>
                                                    </c:if>
                                                    <c:if test="${pageInfo.pageNum == i}">
                                                        <li class="paginate_button active"><a
                                                                href="/user_list?pageSize=${pageInfo.pageSize}&pageNum=${i}"
                                                                aria-controls="example1"
                                                                data-dt-idx="1"
                                                                tabindex="0">${i}</a>
                                                        </li>
                                                    </c:if>
                                                </c:forEach>
                                                <c:if test="${pageInfo.pages!=pageInfo.pageNum}">
                                                    <li class="paginate_button">
                                                        <a href="/user_list?pageSize=${pageInfo.pageSize}&pageNum=${pageInfo.pageNum+1}"
                                                           aria-controls="example1"
                                                           data-dt-idx="${pageInfo.navigatePages+1}"
                                                           tabindex="0">下一页</a>
                                                    </li>
                                                </c:if>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>

    </div>
    <div class="modal modal-info fade" id="modal-info">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">用户详情</h4>
                </div>
                <div class="modal-body">
                    <p>
                    <ul>
                        <li>用户名：<span id="detail_name"></span></li>
                        <li>邮箱：<span id="detail_email"></span></li>
                        <li>电话：<span id="detail_phone"></span></li>
                        <li>用户创建时间：<span id="detail_createTime"></span></li>
                    </ul>
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-outline">Save changes</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


    <jsp:include page="/includes/copyright.jsp"></jsp:include>
</div>
<jsp:include page="includes/footer.jsp"></jsp:include>
<script>

    function detail(parm) {
        $.ajax({
            type: "post",
            url: "/userDetail",
            data: {id: parm},
            dataType: "json",
            success: function (data) {
                //               console.log(data);
                $("#detail_name").html(data.userName);
                $("#detail_email").html(data.email);
                $("#detail_phone").html(data.phone);
                $("#detail_createTime").html(data.createTime);
            }
        })
    }

    var count = 0;
    $(function () {

        $("#toggle-advanced-search").click(function () {
            count++;
            if (count % 2 == 0) {
                $(this).html("<i class='fa  fa-expand'></i>");
                $("#seaches").hide();
            } else {
                $(this).html("<i class='fa fa-compress'></i>");
                $("#seaches").show();
            }
        })
    })

    /*    $(function () {
            $("#simple-search").click(function () {
                var sea=$("#searchAll").val();
                var url="/userLike?search="+sea;
                console.log(url)
                $(window).attr('url');

            })
            $("#advanced-search").click(function () {
                var username=$("#searchName").val();
                var phone=$("#searchPhone").val();
                var email=$("#searchEmail").val();
                var url="/userLike?username="+username+",phone="+phone+",email="+email;
                console.log(url);
     //           window.location.replace(url);
                $(window).attr('url');
            })
        })*/
    function checkAll() {
        // alert($("#selectAll").is(":checked"));
        if ($("#selectAll").is(":checked")) {
            $(".selectOne").each(function () {
                $(this).prop({"checked": true});
            })
        } else {
            $(".selectOne").each(function () {
                $(this).prop({"checked": false});
            })
        }
    }

    $("#deleteArray").click(function () {
        var ids = new Array();
        $(".selectOne").each(function () {
            if ($(this).is(":checked")) {
                ids.push($(this).attr("id"));
            }
        })
        var arrayDeleteUrl = "/deleteArray?ids=" + ids.toString() + "&pageNum=" + $("#hiddenPageNum").val() + "&pageSize=" + $("#hiddenPageSize").val();
        window.location.href = arrayDeleteUrl;

    })

    $("#closeM").click(function () {
        $("#modal-danger").hide();
    })

    $("#closeModa").click(function () {
        $("#modal-danger").hide();
    })

    $(function () {
        $("#setPageSize").change(function () {
            var pageS = $("#setPageSize option:checked").text();
            console.log(pageS);
            window.location.href = "/user_list?pageNum=1&pageSize=" + pageS;
        })
    })


</script>

</body>
